<template>
  <el-card class="box-card table">
    <template #header>
      <div class="card-header">
        <span>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/product/list' }"
              >商品管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          </el-breadcrumb>
        </span>
        <router-link :to="{ path: '/product/add' }">
          <el-button
            class="button"
            type="success"
            icon="el-icon-circle-plus"
            size="small"
            >新增商品</el-button
          >
        </router-link>
      </div>
    </template>
    <div class="table">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%"
      >
	  <el-table-column label="商品ID" width="80">
	    <template #default="scope">
	      <span style="margin-left: 10px">{{ scope.row.id }}</span>
	    </template>
	  </el-table-column>
	  <el-table-column label="商品图片" width="180">
	    <template #default="scope">
			<img :src="scope.row.image" alt="" srcset="" class="product_image">
	    </template>
	  </el-table-column>
	  <el-table-column label="商品分类" width="80">
	    <template #default="scope">
	      <span style="margin-left: 10px">{{ scope.row.category_name }}</span>
	    </template>
	  </el-table-column>
        <el-table-column label="商品名称" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
		<el-table-column label="单价" width="80">
		  <template #default="scope">
		    <span style="margin-left: 10px">{{ scope.row.price }}</span>
		  </template>
		</el-table-column>
		<el-table-column label="库存数量" width="80">
		  <template #default="scope">
		    <span style="margin-left: 10px">{{ scope.row.stock_quantity }}</span>
		  </template>
		</el-table-column>

		<el-table-column label="创建时间" width="240">
		  <template #default="scope">
		    <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
		  </template>
		</el-table-column>
		<el-table-column label="更新时间" width="240">
		  <template #default="scope">
		    <span style="margin-left: 10px">{{ scope.row.updated_at }}</span>
		  </template>
		</el-table-column>
		<el-table-column label="操作" width="280">
		  <template #default="scope">
		    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
		      >编辑</el-button
		    >
		    <el-button size="mini" type="danger" @click="del(scope.row.id)"
		      >删除</el-button
		    >
		  </template>
		</el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="fenye" v-if="total">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="sizes"
        :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 分页结束 -->
  </el-card>
</template>

<script>
import { getProductList,productDel} from "@/api/index.js";
export default {
  name: "ProductList",
  data() {
    return {
      tableData: [],
      total: null,
      currentPage: 1,
      sizes: [10, 20, 30, 40],
      params: {
        page: 1,
        size: 10,
      },
      loading: true,
    };
  },
  created() {
    this.getLists();
  },
  methods: {
    getLists() {
      var that = this;
      getProductList(this.params)
        .then((res) => {
          that.tableData = res.data.data;
          that.total = res.data.total;
          that.loading = false;
          // console.log(res.data);
        })
        .catch((error) => {});
    },
    handleSizeChange(val) {
      this.params.size = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.currentPage = val;
      this.getLists();
    },
	// 编辑方法
	handleEdit(index,row) {
		// 方式一：跳转到编辑页面，传递分类ID
		this.$router.push({
			path: '/product/edit',
			query: {
				id: row.id
			}
		});
	},
	async del(id) {
		var that = this;
		this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
			.then(function() {
				productDel({
						id: id
					})
					.then((res) => {
						if (res.code == 1) {
							that.$message({
								type: "success",
								message: "删除成功!",
							});
							that.getLists();
						}
					})
					.catch((error) => {});
			})
			.catch(function(error) {
				console.log(error,1111)
				that.$message({
					type: "info",
					message: "已取消删除",
				});
			});
	}
  },
};
</script>


<style scoped>
.fenye {
  margin-top: 30px;
}
.product_image{
	width: 100px;
	height: 100px;
}
</style>
